<template>
    <div class="heightPer100 flex paddingTop2_2"> 
        <!-- 头部 -->
        <publicTop :title="titleName" :config="config"></publicTop>
        <!-- 左侧边栏 -->
        <categoryLeft :categorys="categorys" @select="getRightList"></categoryLeft>
        <!-- 右侧边栏 -->
        <categoryRight></categoryRight>
        <!-- 底部 -->
        <publicBottom></publicBottom>
    </div>
</template>

<script>
import config from '../../../config'
import { mapActions, mapState } from 'vuex'
import categoryLeft from './left'
import categoryRight from './right'
import publicTop from '../../public/default/publicTop'
import publicBottom from '../../public/default/publicBottom'
import '../../../style/base.css'
export default {
    data() {
        return {
            config: config.TopConfig.category
        }
    },
    computed: {
        ...mapState({
            titleName: function(state) {
                return state.title
            },
            categorys: (state) => {
                return state.category.categoryList
            }
        })
    },
    mounted() {
        this.setTitle(this.$t('category'))
        this.getLeftList()
    },
    beforeUpdate() {
        // 页面加载默认显示"热门"中的数据
        if (this.categorys[0] !== undefined) this.getRightList(this.categorys[0].id)
    },
    methods: {
        ...mapActions({
            setTitle: 'setTitle',
            getLeftList: 'category/getLeftList',
            getRightList: 'category/getRightList'
        })
    },
    components: {
        categoryLeft,
        categoryRight,
        publicTop,
        publicBottom  
    }

}
</script>




